<script setup>
import venueApi from '../../api/venue.js'; // 新增引入
import { ref, onMounted } from 'vue'
import api from '@/api/concert_show.js'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash-es'
import concert_show from "@/api/concert_show.js";
import ticketZoneApi from '@/api/ticketZone.js'; // 引入票区API
import sk from '@/api/sk.js'
//定义绑定的数据
//绑定表格中的数据
const tableData=ref([]);

const total=ref(0);

//绑定查询数据
const searchObj=ref({
  current:1,
  size:10,
  concertName:'',
  photo:'',
  artist:'',
  venueId:'',
  showDate:'',
  startTime:'',
  endTime:'',
  createTime:'',
  updateTime:'',
});


// 加载状态
const loading = ref(false)

//要修改或新增的数据
const obj=ref({});

const search = async() => {
  await loadVenues(); // 加载场馆信息
  await loadTicketZones(); // 加载票区信息
  var result=await api.page(searchObj.value);
  tableData.value= result.records;
  total.value=result.count;
}
//页面加载后要挂载的数据
onMounted(async ()=> {
  search();
});
//定义方法

/**
 * 添加到购物车
 * 商品对象
 */
// const addToCart = async (product) => {
//   try {
//     // 调用购物车API
//     await cartApi.adduser({
//       product_id: product.product_id,
//       product_name: product.name,
//       price: product.price,
//       img_url: product.img_url,
//       quantity: 1
//     })
//     ElMessage.success(`${product.name} 已添加到购物车`)
//   } catch (error) {
//     ElMessage.error('添加到购物车失败')
//     console.error('购物车错误:', error)
//   }
// }

/**
 * 处理分页大小变化
 * size 新的分页大小
 */
const handleSizeChange=()=>{
  search();
}
/**
 * 处理页码变化
 *  page 新的页码
 */
const handleCurrentChange=()=>{
  search();
}


/**
 * 处理搜索
 */
const handlerSearch = () => {
  searchObj.value.current=1;
  search();
}


const handlerSelect = (index, row) => {
  console.log(index, row)
}

// 添加抢购对话框相关状态
const dialogVisible = ref(false)
const selectedConcert = ref(null)

// 抢购按钮点击事件
const handlePurchase = (concert) => {
  selectedConcert.value = concert
  dialogVisible.value = true
}

// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false
  selectedConcert.value = null
}


// 新增场馆列表数据
const venueList = ref([]);

// 获取所有场馆信息
const loadVenues = async () => {
  try {
    const result = await venueApi.page({current: 1, size: 9999}); // 获取所有场馆
    venueList.value = result.records || [];
  } catch (error) {
    console.error('获取场馆列表失败:', error);
  }
};

// 根据ID获取场馆名称
const getVenueNameById = (venueId) => {
  if (!venueId) return '';
  const venue = venueList.value.find(item => item.id == venueId);
  return venue ? venue.venueName : venueId;
};
const ticketZoneList = ref([]);

// 获取所有票区信息
const loadTicketZones = async () => {
  try {
    const result = await ticketZoneApi.page({current: 1, size: 9999});
    ticketZoneList.value = result.records || [];
  } catch (error) {
    console.error('获取票区列表失败:', error);
  }
};

// 根据演出ID获取票区列表
const getZonesByShowId = (showId) => {
  if (!showId) return [];
  return ticketZoneList.value.filter(item => item.showId == showId);
};


// 添加选中的座位区域状态
const selectedZone = ref('');
const  selectedZoneInfo=ref(null);
// 选择座位区域的方法

const selectZone = (zone) => {
  obj.value.seatArea = zone.zoneName;
  selectedZone.value = zone.zoneName;
  selectedZoneInfo.value = zone; // 保存完整的区域信息
};


const confirmPurchase=async () => {
  await sk.sk(selectedConcert.value.id,selectedZoneInfo.value.id);
  dialogVisible.value = false
  ElMessage.success('请求成功，请到订单表查看抢购结果！');
};

</script>

<template>
  <div class="tea-shop-container">
    <div class="page-header">
      <h2>演唱会</h2>
    </div>

    <!-- 搜索栏 -->
    <el-card class="form-container">
      <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 20px;margin-left: 10px">
        <el-row :gutter="20" align="middle">
          <el-col :span="7" style="text-align: right;">
            <el-form-item label="名称" >
              <el-input v-model="searchObj.concertName" placeholder="请输入名称" clearable @clear="handlerSearch" class="input-with-icon" >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right;" :offset="0">
            <el-form-item>
              <el-button type="primary" @click="handlerSearch">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 演唱会列表 -->
    <div class="tea-products">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <el-icon class="loading-icon"><Loading /></el-icon>
        <span>正在加载超嗨的演唱会...</span>
      </div>

      <!-- 空状态 -->
      <div v-else-if="tableData.length === 0" class="empty-state">
        <el-empty description="暂无演唱会" />
      </div>

      <!-- 演唱会卡片列表 -->
      <div class="card-container">
        <el-card
            style="max-width: 250px"
            v-for="concert in tableData"
            :key="concert.id"
        >
          <!-- 卡片头部显示演唱会名称 -->
          <template #header>
            <strong>{{ concert.concertName }}</strong>
          </template>

          <!-- 演唱会图片 -->
          <img
              :src="concert.photo"
              style=""
              :alt="concert.concertName"
              class="img-container"
          />

          <!-- 演唱会详细信息 -->
          <div class="concert-details">
            <p><i class="el-icon-user"></i> 艺术家: {{ concert.artist }}</p>
<!--            <p><i class="el-icon-location"></i> 场馆ID: {{ concert.venueId }}</p>-->
            <p><i class="el-icon-location"></i> 场馆: {{ getVenueNameById(concert.venueId) }}</p>
            <p><i class="el-icon-date"></i> 演出日期: {{ concert.showDate }}</p>
            <p><i class="el-icon-time"></i> 开始时间: {{ concert.startTime }}</p>
            <p><i class="el-icon-time"></i> 结束时间: {{ concert.endTime }}</p>
          </div>
          <!-- 抢购按钮 -->
          <div style="text-align: center; margin-top: 10px;">
            <el-button type="primary" size="small" @click="handlePurchase(concert)">
              抢购
            </el-button>
          </div>
        </el-card>
      </div>

      <!-- 抢购对话框 -->
      <el-dialog
          v-model="dialogVisible"
          title="抢购演唱会门票"
          width="500px"
          @close="closeDialog"
      >
        <div v-if="selectedConcert">
          <el-card style="margin-bottom: 20px;">
            <template #header>
              <strong>{{ selectedConcert.concertName }}</strong>
            </template>
            <div style="display: flex; align-items: center;">
              <img
                  :src="selectedConcert.photo"                style="width: 100px; height: 100px; margin-right: 15px;"
                  :alt="selectedConcert.concertName"
              />
              <div>
                <p><i class="el-icon-user"></i> 艺术家: {{ selectedConcert.artist }}</p>
                <p><i class="el-icon-date"></i> 演出日期: {{ selectedConcert.showDate }}</p>
                <p><i class="el-icon-time"></i> 时间: {{ selectedConcert.startTime }} - {{ selectedConcert.endTime }}</p>

              </div>
            </div>
          </el-card>

          <el-form label-width="100px">
            <el-form-item label="座位区域">
              <div class="zone-buttons">
                <el-button
                    v-for="zone in getZonesByShowId(selectedConcert?.id)"
                    :key="zone.id"
                    :type="selectedZone === zone.zoneName ? 'primary' : 'default'"
                    @click="selectZone(zone)"            style="margin: 5px;"
                >
                  {{ zone.zoneName }} - ¥{{ zone.price }}
                </el-button>
              </div>
            </el-form-item>

            <!-- 显示选中区域的价格信息 -->
            <el-form-item v-if="selectedZoneInfo" label="价格信息">
              <div class="price-info">
                <p>区域: {{ selectedZoneInfo.zoneName }}</p>
                <p>价格: <span class="price-highlight">¥{{ selectedZoneInfo.price }}</span></p>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="confirmPurchase">确认抢购</el-button>
        </span>
        </template>
      </el-dialog>





      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-pagination
            v-model:current-page="searchObj.current"
            v-model:page-size="searchObj.size"
            :page-sizes="[10, 20, 30, 40]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            class="pagination"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.img-container{
  height: 166px;
}
.zone-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
}
.price-info {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.price-highlight {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
}
/* 整体容器样式 */
.tea-shop-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
  min-height: 100vh;
}
/* 页面容器样式 */
.product-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);
}

.page-header h1 {
  color: #2ec4b6;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 8px;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

/* 搜索卡片样式 */
.search-card {
  margin-bottom: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 加载状态样式 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #666;
}

.loading-icon {
  font-size: 40px;
  margin-bottom: 10px;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 空状态样式 */
.empty-state {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 商品网格样式 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

/* 商品卡片样式 */
.product-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* 商品图片容器 */
.product-image-container {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  color: #c0c4cc;
}

.image-placeholder .el-icon {
  font-size: 50px;
}

/* TOP1 标签 */
.top-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(45deg, #ff6b6b, #ff8e53);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}

/* 品牌标识 */
.brand-label {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.95);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #4361ee;
}

/* 商品信息区域 */
.product-info {
  padding: 20px;
}

.product-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-description {
  color: #666;
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* 价格和按钮容器 */
.price-action-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.price-container {
  flex: 1;
}

.price {
  font-size: 22px;
  font-weight: bold;
  color: #f72585;
}

.cart-button {
  background: linear-gradient(45deg, #90CAF9, #64B5F6);
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.cart-button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

.cart-button .el-icon {
  margin-right: 6px;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }

  .price-action-container {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cart-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
  }

  .search-card .el-form-item {
    margin-bottom: 15px;
  }
}

/* 页面标题样式 */
.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #1f2329;
  font-size: 20px;
  font-weight: 600;
}

.page-header p {
  margin: 5px 0 0;
  color: #86909c;
  font-size: 14px;
}

/* 表单容器样式 */
.form-container {
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  padding-right: 10px;
}

.card-container {
  display: flex;
  gap: 40px;
  padding: 20px;
  flex-wrap: wrap; /* 自动换行 */
}

.product-price {
  margin-top: 10px;
  color: #222831;
  font-weight: bold;
}
</style>